.EditPageList {

  width: 90px;
  @apply flex flex-col h-full relative py-5;

  .pageBoxlist {
    flex: 1;
    padding: 15px;
    @apply flex flex-col gap-5 justify-center;

    .scrollbar-none();

    .EditPageListItem {
      width: 60px;
      height: 60px;
      .appNearBgLg();
      @apply rounded-xl flex justify-center items-center cursor-pointer relative;
      transition: all 0.3s;

      .labelVisible {
        opacity: 1 !important;
        transform: translateX(-100%) !important;
        font-size: 16px !important;
      }

      .label {
        @apply absolute transition duration-500;
        right: 50%;
        color: var(--design-bg-color-3);
        font-weight: 600;
        width: 100px;
        text-align: right;

        opacity: 0;
        transform: translateX(0%);
        font-size: 0px;
      }

      .editVisible {
        opacity: 1 !important;
        transform: translateX(-100%) !important;
        font-size: 16px !important;
      }

      .edit {
        @apply absolute transition duration-500 flex flex-col gap-2;
        right: -60%;
        color: var(--design-bg-color-3);

        opacity: 0;
        transform: translateX(0%);
        font-size: 0px;
      }
    }
  }

  .add {
    @apply flex justify-center items-center;

    .addContent {
      width: 60px;
      height: 60px;
      @apply flex justify-center items-center cursor-pointer;
      transition: all 0.3s;
    }

    .addContentOpen {
      transform: rotate(315deg) scale(1.5);
      color: var(--design-bg-color-3);
    }
  }

  .addEditBox {
    @apply bg-slate-900 absolute rounded-xl p-3 flex flex-col;
    bottom: 0;
    right: calc(100% + 20px);
    // width: 200px;
    .appCompBg();

    .icons {
      display: grid;
      margin-top: 16px;
      gap: 10px;
      grid-template-columns: repeat(6, 30px);

      // 屏幕小于850时强制全屏
      @media screen and (max-width: 850px) {
        grid-template-columns: repeat(5, 30px);
      }

      .iconsItem {
        .appNearBgLg();
        @apply flex rounded-lg justify-center items-center cursor-pointer transition;
        height: 30px;

        &:hover {
          .appDistantBg();
          color: var(--design-bg-color-5)
        }
      }

      .iconsItemChecked {
        @apply text-yellow-500;
      }
    }
  }
}